{extend name="template/base" /}
{block name="content"}
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="__LIB__/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="__LIB__/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="__STATIC__/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="__STATIC__/h-ui.admin/js/H-ui.admin.js"></script>
    <script type="text/javascript" src="__STATIC__/js/app.js"></script>
    <script type="text/javascript" src="__STATIC__/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="__STATIC__/layui/css/layui.css" />

    <script type="text/javascript" src="__LIB__/showdown/1.4.2/showdown.min.js"></script>
    <script>window.UEDITOR_HOME_URL = '__LIB__/ueditor/1.4.3/'</script>
    <script type="text/javascript" charset="utf-8" src="__LIB__/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__LIB__/ueditor/1.4.3/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="__LIB__/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>


    <style type="text/css">

        .clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}
        .tabBar {border-bottom: 2px solid #222}
        .tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px}
        .tabBar span.current{background-color: #222;color: #fff}
        .tabCon {display: none}
        .layui-form-item{margin-top: 10px; margin-left: 20px;}
        .layui-input{padding: 5px;}

        .select {
            border: 0px;
            outline: 1px solid rgb(204,204,204);
            padding: 5px;
            width: 150px;
            height: 30px;
        }
    </style>

</head>

<div id="tab_demo" class="HuiTab">

    <div class="tabBar clearfix" style="margin-top: 40px">

        <span>基本信息</span><span>网点数据库</span><span>受理业务</span><span>网点位置</span>

    </div>

    <form class="form form-horizontal" id="form" method="post" action="{:\\think\\Request::instance()->baseUrl()}">

        <div class="tabCon">

            <div class="page-container">

                <input type="hidden" name="id" value="{$vo.id ?? ''}">

                <div class="row cl">
                    <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>网点编码：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="text" class="input-text" placeholder="网点编码" name="code" value="{$vo.code ?? ''}" >
                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>网点名称：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input  id="name"  class="input-text" placeholder="网点名称" name="name" value="{$vo.name ?? ''}" >
                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>



                <div class="row cl">
                    <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>可预约人数：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input  id="num"  class="input-text" placeholder="可预约人数" name="num" value="{$vo.num ?? ''}" >
                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>


                <div class="row cl">
                    <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>可预约天数：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input  id="days"  class="input-text" placeholder="可预约天数" name="days" value="{$vo.days ?? ''}" >
                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>


                <div class="row cl">
                    <!--<label class="form-label col-xs-3 col-sm-3">业务：</label>-->
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="hidden" id="db_info"  class="input-text" placeholder="" name="db_info" value="{$vo.business ?? ''}" >
                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>

                <div class="row cl">
                    <!--<label class="form-label col-xs-3 col-sm-3">业务：</label>-->
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="hidden" id="business"  class="input-text" placeholder="网点业务" name="business" value="{$vo.business ?? ''}" >
                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>



                <div class="row cl">
                    <label class="form-label col-xs-3 col-sm-3">选择休息时间：</label>

                    <div class="formControls col-xs-6 col-sm-6">

                        <input type="text" class="layui-input" name="times" id="test" style="width: 150px; height: 30px; margin-bottom: 20px;" placeholder="yyyy-MM-dd">

                        <ul id="timeul">



                        </ul>

                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>状态：</label>
                    <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                        <div class="radio-box">
                            <input type="radio" name="status" id="status-1" value="1">
                            <label for="status-1">启用</label>
                        </div>
                        <div class="radio-box">
                            <input type="radio" name="status" id="status-0" value="0">
                            <label for="status-0">禁用</label>
                        </div>
                    </div>
                    <div class="col-xs-3 col-sm-3"></div>
                </div>

                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <button type="submit" class="btn btn-primary radius" >&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                        <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                    </div>
                </div>

            </div>
        </div>



        <div class="tabCon" style="margin-left: 100px;">

            <div class="row cl">
                <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>hostname：</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input type="text" id="hostname" class="input-text" placeholder="hostname"   >
                </div>
                <div class="col-xs-3 col-sm-3"></div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>database：</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input  id="database"  class="input-text" placeholder="database"   >
                </div>
                <div class="col-xs-3 col-sm-3"></div>
            </div>


            <div class="row cl">
                <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>username：</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input type="text" id="username" class="input-text" placeholder="username"   >
                </div>
                <div class="col-xs-3 col-sm-3"></div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>password：</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input  id="password"  class="input-text" placeholder="password"  >
                </div>
                <div class="col-xs-3 col-sm-3"></div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>hostport：</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input  id="hostport"  class="input-text" placeholder="hostport"   >
                </div>
                <div class="col-xs-3 col-sm-3"></div>
            </div>



            <div class="row cl" >
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                </div>
            </div>

        </div>



        <div class="tabCon" style="margin-left: 100px;">


            <div class="row cl">

                <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>业务选择：</label>

                <div class="formControls col-xs-6 col-sm-6" style="margin-bottom: 30px">

                    <select class="select" onchange="func()" id="category">

                        {volist name="groups" id="cat"}

                        <option value ="{$cat.name}">{$cat.name}</option>

                        {/volist}

                    </select>


                    <ul  id="businessul">

                    </ul>

                </div>

            </div>


            <div class="row cl" >
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                </div>
            </div>

        </div>



        <div class="tabCon">

            <div class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

                <div class="layui-form-item">

                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <div id="container" style="height:400px"></div>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="c-red">*</span>网点位置</label>
                    <div class="layui-input-block">
                        <input type="text" name="longitude" id="longitude" size="50"  value="{$vo.longitude ?? ''}" placeholder="地理经度"  autocomplete="off" class="layui-input" />
                        <input type="text" name="latitude" id="latitude" size="50"  value="{$vo.latitude ?? ''}" placeholder="地理纬度"  autocomplete="off" class="layui-input" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">详细地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="address" name="address" placeholder="请输入地址" value="{$vo.address ?? ''}" autocomplete="off" class="layui-input" style="width: 310px;">
                        <input class="layui-input" type="button" value="search" onclick="codeAddress()">
                    </div>
                </div>

            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                </div>
            </div>

        </div>

    </form>

</div>

{/block}
{block name="script"}

<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>

<script>

    var timeArr = [];
    var timehtml = '';

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //自定义事件
        laydate.render({
            elem: '#test'
            ,trigger: 'click' //采用click弹出
            ,calendar: true,

            ready: function(date){

            },
            done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18

                if(!contains(timeArr,value)){

                    timeArr.push(value);

                    timehtml += '<li  style="list-style:none; float:left; margin-left:5px; margin-bottom: 5px"><div onclick="rec(this)" style="width: 80px; height: 25px;  border: 1px gray solid; text-align: center">'+value+'</div></li>';
                }


                $("#timeul").html(timehtml);

            }
        });

    });

    if("{$vo.times ?? ''}") {


        var jsonstr = '{$vo["times"] ? htmlspecialchars_decode($vo["times"]):""}';
        jsonstr = jsonstr.replace(/[\\\\\/\b\f\n\r\t]/g, '');
        var timeJson = JSON.parse(jsonstr);

        if(timeJson.length){

            for(var i = 0; i<timeJson.length;i++){

                timehtml += '<li  style="list-style:none; float:left; margin-left:5px; margin-bottom: 5px"><div onclick="rec(this)" style="width: 80px; height: 25px;  border: 1px gray solid; text-align: center">'+timeJson[i]+'</div></li>';

            }
        }

        $("#timeul").html(timehtml);

        $('#timeul').find('div').each(function() {

            timeArr.push(this.innerHTML);

        })


        var liArr = [];

        var html = '';

        var BusinessJson = JSON.parse('{$vo["business"] ? htmlspecialchars_decode($vo["business"]):""}');
        var BusinessArr = BusinessJson.content;

        if(BusinessArr.length) {

            for(var i = 0; i<BusinessArr.length;i++){

                var obj = BusinessArr[i];
                liArr.push(obj.name);
                html += '<li  style="margin-top: 10px;width: 250px"> <div style="display: flex; flex-direction:row;"> <div style="width: 120px; ">'+obj.name+'</div> <div style="margin-left: 20px;width: 50px;" onclick="dels(this,\''+obj.name+'\')"> 删除</div> </div> </li>'

            }

            $("#businessul").html(html);

        }

    }

    function contains(arr, obj) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === obj) {
                return true;
            }
        }
        return false;
    };

    function removeByValue(arr, val) {


        for(var i=0; i<arr.length; i++) {
            if(arr[i] == val) {
                arr.splice(i, 1);
                break;
            }
        }
    };

    function rec(message){

        var r=confirm("是否删除?");


        if (r==true)
        {

            removeByValue(timeArr, message.innerHTML);

            message.remove();

            html = $("#timeul").html();

        }
        else
        {

        }

    };


    $(function () {

        $.Huitab("#tab_demo .tabBar span","#tab_demo .tabCon","current","click","0");

        $("[name='status'][value='{$vo.status ?? ''}']").prop("checked", true);

        $('.skin-minimal input').iCheck({

            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'

        });

        $("#form").Validform({
            tiptype: 1,
            ajaxPost: true,
            showAllError: true,
            callback: function (ret){

                ajax_progress(ret);

            }
        });
    })



    Array.prototype.removeByValue = function(val) {
        for(var i=0; i<this.length; i++) {
            if(this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    }

    function dels(that,message) {

        liArr.removeByValue(message);
        that.parentNode.parentNode.remove();

    }

    var html = '';

    function func() {

        html = $("#businessul").html();

        var objS = document.getElementById("category");

        var grade = objS.options[objS.selectedIndex].value;

        var flog = 0;

        for(var i = 0 ; i < liArr.length; i++){
            var obj = liArr[i];

            if (obj == grade){
                flog = 1;
            }
        }

        if(!flog){

            liArr.push(grade);
            html += '<li style="margin-top: 10px;width: 250px"> <div style="display: flex; flex-direction:row;"> <div style="width: 120px; ">'+grade+'</div> <div style="margin-left: 20px;width: 80px;" onclick="dels(this,\''+grade+'\')"> 删除</div> </div> </li>'

        }

        $("#businessul").html(html);

    }

    if("{$vo.db_info ?? ''}"){




         var jsonstr = '{$vo["db_info"] ? htmlspecialchars_decode($vo["db_info"]):""}';

         jsonstr = jsonstr.replace(/[\\\\\/\b\f\n\r\t]/g, '');

         var db_infoJson = JSON.parse(jsonstr);

         $('#hostname').val(db_infoJson['hostname']);
         $('#database').val(db_infoJson['database']);
         $('#username').val(db_infoJson['username']);
         $('#password').val(db_infoJson['password']);
         $('#hostport').val(db_infoJson['hostport']);


    }




    $("form").submit(function(e){

        var timeJson = {};

        timeJson = timeArr;

        $("#test").val(JSON.stringify(timeJson));

        var json = {};
        var DayArr = [];
        var status= 0;

        var db_json = {};

        db_json['type'] = "\\think\\oracle\\Connection";
        db_json['hostname'] = $('#hostname').val();
        db_json['database'] = $('#database').val();
        db_json['username'] = $('#username').val();
        db_json['password'] = $('#password').val();
        db_json['hostport'] = $('#hostport').val();


        $("#db_info").val(JSON.stringify(db_json));


        var BusinessArr = [];
        var BusinessJson = {};
        for(var i = 0; i < liArr.length; i++){

            var b = liArr[i];

            var bjson = {};

            bjson['name'] = b;


            BusinessArr.push(bjson);

        }
        BusinessJson['content'] = BusinessArr;

        if(liArr.length > 0){
            $("#business").val(JSON.stringify(BusinessJson));
        }

    });

    function init() {
        var myLatlng = new qq.maps.LatLng(31.49099,120.31237);
        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        var map = new qq.maps.Map(document.getElementById("container"), myOptions);
        map.panTo(myLatlng);

        geocoder = new qq.maps.Geocoder({
            complete:function(result){
//                console.log(result);
                document.getElementById('longitude').value = result.detail.location.lng;
                document.getElementById('latitude').value = result.detail.location.lat;
                document.getElementById('address').value = result.detail.address;

            }
        });

        qq.maps.event.addListener(map,'click',
                function(event) {
                    var coord=new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng());
//                                    document.getElementById('latlng').value = event.latLng.getLat()+','+ event.latLng.getLng();
                    geocoder.getAddress(coord);
                    //调用信息窗口
                    var info = new qq.maps.InfoWindow({map: map});

                }
        );

        //调用地址解析类

        geocoder2 = new qq.maps.Geocoder({
            complete : function(result){
                map.setCenter(result.detail.location);
                document.getElementById('longitude').value = result.detail.location.lng;
                document.getElementById('latitude').value = result.detail.location.lat;
                var marker = new qq.maps.Marker({
                    map:map,
                    position: result.detail.location
                });
            }
        });

    }
    function codeAddress() {
        var address = document.getElementById("address").value;
        //通过getLocation();方法获取位置信息值
        geocoder2.getLocation(address);
    }

    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://map.qq.com/api/js?v=2.exp&callback=init";
        document.body.appendChild(script);
    }
    window.onload = loadScript;

    parent.$("#locationstatus").val(0);
    $(function () {

        $(".layui-btn").on('click', function(){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            var data = $("#locationJson").val();

            newdata = eval('(' + data + ')');
            var length = newdata.length;

            var longitude = $("#longitude").val();
            var latitude = $("#latitude").val();
            var address = $("#address").val();
            var newRow = "<tr><td align=\"center\">"+latitude+"</td><td align=\"center\">"+longitude+"</td><td align=\"center\">"+address+"</td><td align=\"center\"><input type=\"button\" dataid="+length+" value=\"删除\" class='deletelocation'></td></tr>";
            parent.$("#locationList tr:last").after(newRow);

            newdata[length] = {"longitude":longitude,"latitude":latitude,"address":address};
            newdata = JSON.stringify(newdata);
            parent.$("#locationListJson").val(newdata);
            parent.$("#locationstatus").val(1);
            parent.layer.close(index);
        });
    });

</script>
{/block}